import React, { useEffect, useState } from 'react';
import styles from '../css/perform.module.css';
import hourse3 from '../assets/hourse3.png';
import lefts from '../assets/left.png';
import { useNavigate } from 'react-router-dom'; // 导入 useNavigate 钩子函数
import { fetchPerformData } from '../api/performApi'; // 引入封装好的接口

const Perform = () => {
    const navigate = useNavigate(); // 使用 useNavigate 钩子函数获取 navigate 函数
    const [array, setArray] = useState([]);
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [marginLeft, setMarginLeft] = useState('');

   useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetchPerformData(3);
      if (response && response.code === 1) {  // 检查返回状态码
        console.log(response.data);
        setArray(response.data);
        setSelectedIndex(0);
        // 初始时计算高亮条位置
        const initialMarginLeft = 3; // 初始 3% 的间距
        setMarginLeft(`${initialMarginLeft}%`);
      } else {
        console.error('获取演出预告数据失败:', response.msg);
      }
    } catch (error) {
      console.error('获取演出预告数据失败:', error);
    }
  };

  fetchData();
}, []);

    const fifclick = (index) => {
        setSelectedIndex(index);
        // 根据索引计算高亮条位置
        const optionWidth = 15; // 选项卡宽度为 15%
        const gap = 1; // 选项卡间距为 1%
        const margin = 3 + (optionWidth + gap) * index;
        setMarginLeft(`${margin}%`);
    };

    const back = (e) => {
        e.preventDefault();
        e.stopPropagation();
        console.log('Back button clicked'); // 添加调试信息
        navigate(-1);
    };

    const first = () => {
        navigate("/home");
    };

    return (
        <div style={{ backgroundColor: '#f4f4f4' }}>
            {/* 顶部区域 */}
            <div className={styles.top}>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    whiteSpace: 'nowrap',
                    width: '50%',
                    justifyContent: 'space-between'
                }}>
                    <div className={styles.left} >
                        <div onClick={back} style={{ width: '25px', height: '80px' }}><img style={{ zIndex: 1, marginTop: '130%' }} src={lefts} alt="" /></div>
                        <div className={styles.line}></div>
                        <img id="hourse" src={hourse3} alt="" onClick={first} />
                    </div>
                </div>
                <p>演出预告</p>
            </div>

            {/* 选项卡区域 */}
            <div className={styles.option}>
                <div className={styles.options}>
                    {array.map((item, index) => (
                        <div
                            key={item.id}
                            className={styles.items}
                            onClick={() => fifclick(index)}
                            style={{
                                color: selectedIndex === index ? '#2a82e4' : '#63637c',
                                transition: 'all 0.5s'
                            }}
                        >
                            <p>{item.title}</p>
                        </div>
                    ))}
                </div>
                <div className={styles["options-div"]}>
                    <div style={{
                        width: '11%', // 确保高亮条宽度与选项卡宽度一致
                        marginLeft: marginLeft,
                        backgroundColor: '#2a82e4', // 为了更明显地看到高亮条，添加背景色
                        height: '3px', // 高亮条高度
                        transition: 'all 0.3s'
                    }}></div>
                </div>
            </div>

            {/* 内容区域 */}
            <div className={styles.big}>
                <div className={styles.block}>
                    <div className={styles.round}></div>
                    <div className={styles.tree}></div>
                </div>
                <div className={styles["block-one"]}>
                    {array.filter((_, index) => index === selectedIndex).map((item) => (
                        <div
                            key={item.id}
                            className={styles.content}
                            onClick={() => navigate("/map")}
                        >
                            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px' }}>
                                <span>{item.title}</span>
                                <b>{item.create_time}</b>
                            </div>
                            <div style={{ width: '98%', marginLeft: '1%', display: 'flex', flexWrap: 'wrap' }}>
                                <p style={{ width: '100%', marginTop: '10px', overflow: 'hidden' }}>{item.introduce}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default Perform;